<template>
  <div class="channel">
    <search-list
      :api-url="$url.CmsChannelList"
      :option="searchOpt"
      :itemPerRow="8"
      @selection-change="selectionChange"
    >
      <el-table-column type="selection"></el-table-column>
      <el-table-column prop="id" label="频道ID"></el-table-column>
      <el-table-column prop="title" label="频道名称"></el-table-column>
      <el-table-column prop="kind" label="频道类型">
        <template slot-scope="scope">
          <span>
            {{ $selectFormat['channelKindSl'](scope.row.kind).label }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="online" label="在线状态">
        <template slot-scope="scope">
          <span>
            {{ $selectFormat['onlineSl'](scope.row.online).label }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="platform" label="平台类型">
        <template slot-scope="scope">
          <span>
            {{ $selectFormat['platformSl'](scope.row.platform).label }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="url" label="跳转链接"></el-table-column>
      <el-table-column prop="createdAt" label="创建时间" width="150px"></el-table-column>
      <el-table-column prop="updatedAt" label="更新时间" width="150px"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <div>
            <el-button type="text" @click="check(scope.row)" v-permission="['channel:check']">
              管理
            </el-button>
          </div>
        </template>
      </el-table-column>

      <div slot="btn-after" class="btn-after" slot-scope="scope">
        <el-button type="success" v-permission="['channel:add']" icon="el-icon-plus" @click="add">
          新增频道
        </el-button>
        <el-button
          type="danger"
          icon="el-icon-close"
          :disabled="scope.selectedData.length === 0"
          @click="del"
          v-permission="['channel:del']"
        >
          删除频道
        </el-button>
      </div>
    </search-list>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selectedData: [],
        searchOpt: [
          {
            type: 'channelKindSl',
            name: 'kind',
            label: '频道类型',
          },
          {
            type: 'channlePlatformSl',
            name: 'platform',
            label: '平台类型',
          },
          {
            type: 'onlineSl',
            name: 'online',
            label: '在线状态',
          },
        ],
      };
    },
    mounted() {},
    methods: {
      /**
       * 查看跳转
       */
      check(row) {
        const { id } = row;
        this.$tabs.open({ name: 'ChannelDetail', params: { id } });
      },
      /**
       * 新增
       */
      add() {
        this.$tabs.open({ name: 'ChannelDetail', query: { pid: this.id } });
      },
      /**
       * 删除选择的频道
       */
      del() {
        this.$confirm(
          `确认删除所选的 ${this.selectedData.length} 条数据? 删除之后无法恢复! 请谨慎操作`,
          {
            title: '删除',
            type: 'warning',
          },
        ).then(() => {
          console.log(this.selectedData);
          return this.$service.CmsChannelDelete({
            channelId: this.selectedData.map((data) => data.id).join(','),
          });
        });
      },

      //  ======== Event ===========
      selectionChange(val) {
        this.selectedData = [...val];
      },
    },
  };
</script>

<style lang="less" scoped>
  .el-carousel {
    width: 1000px;
  }

  /deep/ .el-carousel__item {
    .title {
      position: absolute;
      right: 20px;
      bottom: 20px;
      padding: 20px;
      border-radius: 2px;
      background-color: rgba(0, 0, 0, 0.5);
      color: white;
      font-size: 20px;
    }
  }
</style>
